<template>
  <div id="Notice">
    <div class="header" style="height: 58px;">
      <span class="title">{{datas.title}}</span>
      <router-link :to="datas.url+'?show=true'" class="more" style="position: absolute;right: 0;top:0;">更多>></router-link>
    </div>
    <div class="list">
      <ul>
        <router-link v-for="item in datas.list" v-bind:key="item.id" :to="{path:'/AnnouncementbuildingGarden/AnnouncementOne/NewsInfo?centent=centent&id='+item.id}">
          <li>
            <a v-html="item.title"></a>
            <span>[{{item.date}}]</span>
          </li>
         </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import  baseConfig from 'baseConfig'

export default {
  name: 'Notice',
  props: {
    datas: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return baseConfig.notice
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import 'publicLib/scss/defualtScss.scss';
  ul li{
    list-style: none;
  }
  #Notice{
    height: 26.5rem;
    /*border: #D6D6D6 0.05rem solid;*/
    /*background-color: white;*/
    padding: 0 1rem;

    .header{
      position: relative;
      height: 62px;
      display: flex;
      align-items: center;
      color: $contect-us-color;
      margin-bottom:0.5rem;
      font-size: 1.1rem;
     // border-bottom: #D6D6D6 0.25rem solid;

      .title{
        display: inline-block;
        height: 62px;
        width: 142px;
        font-weight: bold;
        float: left;
        line-height: 62px;
        color: white;
        text-align: left;
      }

      .more{
        display: inline-block;
        width: 140px;
        height: 62px;
        line-height: 62px;
        font-size: 1rem;
        color: white;
        text-align: right;

        /*<!--right:-20rem;-->*/
        cursor: pointer;
      }
      .notice {
        margin-left: 1rem;
        margin-right: 10rem;
        color: white;
        font-size: 1.1rem;
      }

    }

    .list{
      line-height: 3rem;
      font-size: $font-size-default;
      color: $data-detail-font-color;

      ul{
        text-align: left;
        padding-left: 1rem;
      }

      li{
        border-bottom: #D6D6D6 0.09rem dotted;
        position: relative;
        line-height:0.6rem;
        /*overflow: hidden;*/

        a{
          display: inline-block;
          width:81%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          color: #58585c;
          line-height:2.6rem;
          font-size: $font-size-default;
          &:hover{
            color: red;
          }
        }

        &:hover{
          color: red;
        }
        span{
          text-algin:right;
        }
        span:nth-child(2){
          display: inline-block;
          position: relative;
          margin-left: 20px;
           top: -17px;

        }
      }
    }
  }
</style>
